<!--
author: 何其沆(pooky)
desc: Others - Performance
date: 2021-11-12
-->
<template>
  <div class="performance">
    <router-view v-if="route.matched.length === 3" />
    <e-container v-else class="container">
      <a-spin :spinning="loading" tip="Loading...">
        <a-table
          :columns="columns"
          :data-source="data"
          class="ant-table-striped"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'paymentNum'">
              <a @click="clickBaNumber(record)">{{ record.paymentNum }}</a>
            </template>
            <template v-if="column.key === 'commission'">
              <span>{{ record.currencyName }} &nbsp; {{ record.performance }}</span>
            </template>
          </template>
          <template #emptyText>
            <e-empty>
              <template #description>
                <div>No Data</div>
              </template>
            </e-empty>
          </template>
        </a-table>
      </a-spin>
      <div v-if="total > 0" class="pagination">
        <a-pagination
          v-model:current="current"
          v-model:pageSize="pageSize"
          :total="total"
          show-less-items
          :show-size-changer="false"
          @change="changeSize"
        />
      </div>
    </e-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import pageColumns from '@/assets/script/page_columns.js'
import p from '@/api/performance.js'

const performance = pageColumns.performance
const columns = reactive(performance)
const data = ref([])
const route = useRoute()
const router = useRouter()
const current = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)
/**
 * 获取数据列表
 * @returns {Promise<void>}
 */
const getList = () => {
  loading.value = true
  p.getPerformanceList({
    page: {
      pageRows: pageSize.value,
      pageIndex: current.value,
      sort: '',
      order: '',
      total: 0
    }
  })
    .then(res => {
      if (res.code === 2000) {
        data.value = res.data
        total.value = res.total
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 切换页码
 * @param cur
 */
const changeSize = cur => {
  current.value = cur
  getList()
}
/**
 * 点击Batch Number
 * @param record
 */
const clickBaNumber = record => {
  router.push({
    path: route.path + '/detail',
    query: {
      paymentNum: record.paymentNum,
      employee: record.employee
    }
  })
}
/**
 * 初始化
 */
onMounted(() => {
  getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
</style>
<route lang="yaml">
name: Performance
path: /performance/
</route>
